<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车商城首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!--    <link rel="stylesheet" href="styles.css"> &lt;!&ndash; 自定义样式表，可用于添加额外的样式规则 &ndash;&gt;-->
    <style>
        /* 在这里可以添加一些自定义的样式规则，比如设置图片大小、元素间距等 */
        #carOuter img {
            width: 120px;
            height: 150px;
        }

        /* 商品轮播区样式 */
        .product-carousel {
            margin: 20px 0;
        }

        /* 轮播图图片样式，强行设置固定大小 */
        .carousel-item img {
            width: 400px; /* 固定宽度 */
            height: 300px; /* 固定高度 */
            object-fit: cover;
            display: block; /* 将图片设置为块级元素，以便进行居中操作等 */
            margin: 0 auto; /* 水平方向自动居中，
            上下边距为0 */
        }

        /* 搜索框样式 */
        #searchBox {
            width: 300px;
        }
    </style>
</head>

<body>

<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">汽车商城</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#" data-page="index" data-url="/dev/views/UserIndex.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-page="purchase-guide" data-url="/dev/views/gczl2.html">购车指南</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-page="contact-us" data-url="/dev/views/lxwm2.html">联系我们</a>
                </li>
            </ul>
        </div>
        <!-- 添加登录按钮 -->
        <button type="button" class="btn btn-outline-primary" id="loginButton">退出登录</button>
    </div>
</nav>

<!-- 搜索框 -->
<div class="container mt-3">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <input type="text" class="form-control" id="searchBox" placeholder="搜索汽车品牌、型号...">
            <button type="button" class="btn btn-primary mt-2" id="searchButton">搜索</button>
        </div>
    </div>
</div>

<!-- 商品轮播区 -->
<div id="productCarousel" class="carousel slide product-carousel" data-bs-ride="carousel">

    <div class="carousel-inner">
        <div class="carousel-item active">

            <img id="carouselImage" src="../img/fll.png" class="d-block w-full" alt="Carousel Product 1">
        </div>

    </div>

</div>



<!-- 车辆列表展示 -->
<div class="container mt-3" id="carListContainer">
    <div class="row" id="carOuter">

    </div>
</div>

<!-- 分页功能 -->
<div class="container mt-3">
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="Page navigation example" id="paginationNav">
                <ul class="pagination justify-content-center">
                    <li class="page-item"><a class="page-link" href="#" id="prevPageLink">Previous</a></li>
                    <li class="page-item"><a class="page-link" href="#" id="currentPageDisplay"></a></li>
                    <!-- 这里将通过JavaScript动态生成页码链接 -->
                    <li class="page-item"><a class="page-link" href="#" id="nextPageLink">Next</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 引入必要的JavaScript库 -->
<script src="/dev/plugins/jquery/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
<script>

    // 获取登录按钮元素
    var loginButton = document.getElementById('loginButton');

    // 为登录按钮添加点击事件
    loginButton.addEventListener('click', function (e) {
        e.preventDefault(); // 阻止默认的按钮点击行为（例如表单提交等）


        // 假设登录页面的URL是 /dev/views/login.html
        var loginUrl = '/dev/views/login.html';



        // 执行跳转
        window.location.href = loginUrl;
    });

    // 等待页面加载完成
    window.onload = function () {
        // 获取要轮播的图片元素
        var carouselImage = document.getElementById('carouselImage');
        var imagess = "../img/"
        // 定义图片数组，存放要轮播的图片路径
        var images = ["fll.png", "lbjn.png", "lsls.png"];
        // 当前显示图片的索引
        var currentIndex = 0;

        // 定义函数用于切换图片
        function changeImage() {
            currentIndex++;
            if (currentIndex >= images.length) {
                currentIndex = 0;
            }

            carouselImage.src = imagess + images[currentIndex];

        }

        // 每隔2秒调用切换图片的方式
        setInterval(changeImage, 2000);

        // 获取所有的导航链接元素
        var navLinks = document.querySelectorAll('.navbar-nav a');

        // 遍历每个导航链接元素
        navLinks.forEach(function (link) {
            // 为每个导航链接添加点击事件
            link.addEventListener('click', function (e) {
                e.preventDefault(); // 阻止默认的链接跳转行为

                // 获取链接元素上的自定义数据属性值
                const page = this.dataset.page;
                const url = this.dataset.url;

                // 根据页面标识进行一些额外的操作（这里可根据实际需求扩展，比如记录页面访问日志等）
                if (page === "index") {
                    console.log("即将跳转到首页");
                } else if (page === "purchase-guide") {
                    console.log("即将跳转到购车指南页");
                } else if (page === "contact-us") {
                    console.log("即将跳转到联系我们页");
                }

                // 执行跳转
                window.location.href = url;
            });
        });
    };

    // 在全局作用域下定义goToDetails函数
    function goToDetails(button) {
        const carInfo = JSON.parse(button.dataset.carInfo);
        // 将车辆信息添加到URL参数中，这里假设详情页的URL是 /dev/views/details
        const urlParams = new URLSearchParams();
        for (let key in carInfo) {
            urlParams.append(key, carInfo[key]);
        }
        const detailUrl = `/dev/views/details2.html?${urlParams.toString()}`;
        console.log("即将跳转的详情页URL：", detailUrl);
        window.location.href = detailUrl;
    }

    $(function () {
        let carOuter = document.getElementById("carOuter");
        let str = "";
        let currentPage = 1; // 当前页码，初始化为1
        let pageSize = 16; // 每页显示的商品数量
        let currentPageDisplay = document.getElementById('currentPageDisplay');
        currentPageDisplay.textContent = "当前页：" + currentPage;

        // 初始加载车辆列表数据（带分页）
        currentPage = loadCarList(currentPage, pageSize);

        // 处理搜索框搜索事件
        $('#searchButton').click(function (e) {
            e.preventDefault();
            let searchTerm = $('#searchBox').val();
            currentPage = 1; // 搜索后重置当前页码为1

            // 发送AJAX请求到后端搜索接口（带分页参数）
            $.ajax({
                type: "GET",
                url: "/dev/car/search",
                data: {
                    keyword: searchTerm,
                    pageNumber: currentPage,
                    pageSize: pageSize
                },
                success: function (response) {
                    // 处理后端返回的搜索结果
                    // console.log("后端返回的搜索结果数据：", response);

                    let carOuter = document.getElementById("carOuter");
                    let str = "";
                    if (response && response.data) {
                        response.data.forEach(function (car) {
                            // console.log("后端返回的搜索结果数据：", car);
                            // console.log("后端返回的搜索结果数据：", car.imagePath);
                            str += `
                                    <div class="col-sm-6 col-md-3">
                                        <div class="thumbnail">
                                            <img src="/dev/img/${car.imagePath}"
                                                alt="通用的占位符缩略图">
                                            <div class="caption">
                                                <h3>${car.brand}</h3>
                                                <p>${car.description}</p>
                                                <p>
                                                    <a href="#" class="btn btn-primary" role="button" data-car-info='${JSON.stringify(car)}' onclick="goToDetails(this)">
                                                        查看详情
                                                    </a>

                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                `;
                        });
                        carOuter.innerHTML = str;
                        updatePagination(response.totalPages, currentPage);
                    } else {
                        carOuter.innerHTML = "<p>未找到相关汽车信息。</p>";
                    }
                },
                error: function (xhr, status, error) {
                    // console.log("搜索请求出错：", error);
                    carOuter.innerHTML = "<p>搜索请求出错，请稍后重试。" + error + "</p>";
                }
            });
        });

        // 加载车辆列表数据的函数（带分页）
        function loadCarList(currentPage, pageSize = 16) {
            let url = '/dev/car/index1';

            $.get(url, function (res) {
                console.log("成功获取到的数据：", res);
                let arr = res.data;
                str = "";

                // 确定数据总数和总页数
                let totalCount = res.totalCount;
                let totalPages = Math.ceil(totalCount / pageSize);

                // 根据当前页截取对应的数据
                let startIndex = (currentPage - 1) * pageSize;
                let endIndex = startIndex + pageSize;
                let currentPageData = arr.slice(startIndex, endIndex);

                // 确保结束索引不超过数据总数
                if (endIndex > arr.length) {
                    endIndex = arr.length;
                }

                for (let i = startIndex; i < endIndex; i++) {
                    str += `
                            <div class="col-sm-6 col-md-3">
                                <div class="thumbnail">
                                    <img src="/dev/img/${arr[i].imagePath}"
                                        alt="通用的占位符缩略图">
                                    <div class="caption">
                                        <h3>${arr[i].brand}</h3>
                                        <p>${arr[i].description}</p>
                                        <p>
                                            <a href="#" class="btn btn-primary" role="button" data-car-info='${JSON.stringify(arr[i])}' onclick="goToDetails(this)">
                                                查看详情
                                            </a>

                                        </p>
                                    </div>
                                </div>
                            </div>
                        `;
                }
                carOuter.innerHTML = str;
                if (res.totalPages) {
                    updatePagination(res.totalPages, currentPage);
                }
            });
            return currentPage;
        }

        // 获取上一页按钮元素
        let prevPageLink = document.getElementById('prevPageLink');

        // 为上一页按钮添加点击事件监听器
        prevPageLink.addEventListener('click', function (e) {
            e.preventDefault();

            // 更新当前页码，确保不小于1
            currentPage = Math.max(1, currentPage - 1);

            // 调用loadCarList函数获取上一页数据，并更新当前页码显示元素
            currentPage = loadCarList(currentPage, pageSize);

            // 更新当前页码显示元素的内容
            if (currentPageDisplay) {
                currentPageDisplay.textContent = "当前页：" + currentPage;
            }
        });

        // 获取下一页按钮元素
        let nextPageLink = document.getElementById('nextPageLink');

        // 为下一页按钮添加点击事件监听器
        nextPageLink.addEventListener('click', function (e) {
            e.preventDefault();

            // 更新当前页码
            currentPage++;

            // 调用loadCarList函数获取下一页数据，并更新当前页码显示元素（假设存在名为currentPageDisplay的元素用于显示当前页码）
            currentPage = loadCarList(currentPage, pageSize);

            // 更新当前页码显示元素的内容
            if (currentPageDisplay) {
                currentPageDisplay.textContent = "当前页：" + currentPage;
            }
        });

    });
</script>

</body>

</html>